<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .style2{
        width: 5px;
        height: 5px;
    }
</style>
<body>
    <p oncilck="showColorPicker()" >改变背景颜色</p>
    <table id="p1"></table>

</body>
<script>
        let arr = new Array()
        for(let i=0;i<=8;i++){
            for(let j=0;j<=8;j++){
                for(let k=0;k<=8;k++){
                    arr.push("rgba("+i*32+","+j*32+","+k*32+")")
                }
            }
        }
        function a(e){
            console.log(e.style.background)
        }
        var m=0;

        // console.log("rgba("+r+",255,255)")
        //JS动态生成含有729个色块，rgb值间隔为32的颜色选择器
        for(let i=0;i<=26;i++){
            var tt = document.createElement("tr");
                document.querySelector('#p1').appendChild(tt);
            for(let j=0;j<=26;j++){
                var td=document.createElement('td')
                td.setAttribute("class", "style2");
                td.style.background=arr[m]
                var MyULID="li"+m++;
                 td.setAttribute("id",MyULID);
                td.setAttribute("onclick", "a("+MyULID+")");
                var style = document.createAttribute("style");
                document.querySelector('#p1').append(td)
            }
        }
</script>
</html>